<template>
  <div class="dice" @click="rollDice" :class="[`dice-${dice}`, { rolling: diceRolling }]" :key="(diceRolling ? 0 : 1) + 1">
  </div>
</template>

<script setup lang="ts">
const { dice, diceRolling, rollDice } = useFlight()
</script>

<style scoped lang="scss">
.dice {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: center center / contain no-repeat;
  cursor: pointer;

  &:not(.rolling) {
    &.dice-1 {
      background-image: url('@/assets/images/1.png');
    }
    &.dice-2 {
      background-image: url('@/assets/images/2.png');
    }
    &.dice-3 {
      background-image: url('@/assets/images/3.png');
    }
    &.dice-4 {
      background-image: url('@/assets/images/4.png');
    }
    &.dice-5 {
      background-image: url('@/assets/images/5.png');
    }
    &.dice-6 {
      background-image: url('@/assets/images/6.png');
    }
  }

  &.rolling {
    animation: roll 0.2s infinite;
  }
}

@keyframes roll {
  0% {
    transform: rotate(0deg);
    background-image: url('@/assets/images/1.png');
  }
  16% {
    transform: rotate(120deg);
    background-image: url('@/assets/images/2.png');
  }
  33% {
    transform: rotate(180deg);
    background-image: url('@/assets/images/3.png');
  }
  50% {
    transform: rotate(240deg);
    background-image: url('@/assets/images/4.png');
  }
  66% {
    transform: rotate(300deg);
    background-image: url('@/assets/images/5.png');
  }
  83% {
    transform: rotate(360deg);
    background-image: url('@/assets/images/6.png');
  }
  100% {
    transform: rotate(0deg);
    background-image: url('@/assets/images/1.png');
  }
}

</style>
